import React from 'react';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { useNavigate,useLocation } from "react-router-dom";
import './index.less'

type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
  {
    label:'人员管理',
    key:'',
    icon:<MailOutlined />,
    children:[
      {
        label:'message',
        key:'/home/message',
      },
      {
        label:'news',
        key:'/home/news',
      }
    ]
  },
  {
    label:'商品管理',
    key:'/home/goods',
    icon:<MailOutlined />,
  },
  {
    label:'规格管理',
    key:'/home/spec',
    icon:<MailOutlined />,
  }
];

const LeftMenu: React.FC = () => {
  const navigateTo = useNavigate()
  const location = useLocation()
  const onClick: MenuProps['onClick'] = (e) => {
    console.log('click ', e);
    navigateTo(e.key)
  };

  return (
    <Menu
      onClick={onClick}
      style={{width:'100%',height:'calc(100vh - 50px)',overflowY:'auto',overflow:'auto' }}
      defaultSelectedKeys={[location.pathname]}
      defaultOpenKeys={['/home']}
      mode="inline"
      items={items}
    />
  );
};

export default LeftMenu;